import React from 'react';
import './App.css';
import GameBoard from './components/GameBoard';
import Controls from './components/Controls';
import { useGame } from './hooks/useGame';

function App() {
    const {
        grid,
        setGrid,
        rowHints,
        colHints,
        gameStarted,
        message,
        loading,
        error,
        difficulty,
        setDifficulty,
        hintsLeft,
        startNewGame,
        checkSolution,
        getHint
    } = useGame();

    return (
        <div className="App">
            <div className="container">
                <h1>数织游戏</h1>
                
                <Controls 
                    onNewGame={startNewGame} 
                    onCheckSolution={checkSolution}
                    onHint={getHint}
                    hintsLeft={hintsLeft}
                    disabled={loading}
                    difficulty={difficulty}
                    onDifficultyChange={setDifficulty}
                />
                
                {loading && <div className="loading">加载中...</div>}
                {error && <div className="error">{error}</div>}
                
                {gameStarted && (
                    <GameBoard
                        grid={grid}
                        setGrid={setGrid}
                        rowHints={rowHints}
                        colHints={colHints}
                    />
                )}
                
                {message && <div className="message">{message}</div>}
            </div>
        </div>
    );
}

export default App; 